<template>
    <div class="course-table-container">
        <div class="date-header">
            <div class="current-date">{{ currentDate }}
                <span v-if="isCurrentWeek" style="color: red;">本周</span>
            </div>
            <div class="week-navigation">
                <button @click="prevWeek">上一周</button>
                <button @click="nextWeek">下一周</button>
            </div>
        </div>

        <table>
            <thead>
                <tr>
                    <th>时间/星期</th>
                    <th v-for="day in days" :key="day">
                        {{ getZH(day) }}<br>{{ getDayDate(day) }}
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(time, index) in times" :key="index">
                    <td>{{ time }}</td>
                    <td v-for="day in days" :key="day">
                        {{ courseData[day][index] || '' }}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { getCurriculumScheduleService } from '@/apis/curriculumSchedule';
import { getCourseListService } from '@/apis/course'

const currentWeekStart = ref(new Date());

async function getCurriculumSchedule() {
    const date = new Date(currentWeekStart.value);
    date.setDate(date.getDate() - date.getDay() + 1); // 本周Monday

    const endDate = formatDate(new Date(date.getTime() + 6 * 86400000));
    const startDate = formatDate(date);
    const res = await getCurriculumScheduleService(startDate, endDate);
    courseData.value = res.data;
}

const courseList = ref([])
async function getCourseList() {
    try {
        const res = await getCourseListService();
        courseList.value = res.rows;
    } catch (error) {
        console.error("加载教师列表失败:", error);
    }
}

// 初始化
onMounted(() => {
    updateCurrentDate();
    getCourseList();
    getCurriculumSchedule();
});

function getZH(day) {
    const translation = {
        0: '周一',
        1: '周二',
        2: '周三',
        3: '周四',
        4: '周五',
        5: '周六',
        6: '周天'
    };
    return translation[day];
}

const days = ['0','1', '2', '3', '4', '5', '6'];
const times = ['上午(9:00-12:00)', '下午(14:00-17:00)', '晚上(19:00-22:00)'];

const currentDate = ref('');

const courseData = ref({
    0: Array(3).fill(null),
    1: Array(3).fill(null),
    2: Array(3).fill(null),
    3: Array(3).fill(null),
    4: Array(3).fill(null),
    5: Array(3).fill(null),
    6: Array(3).fill(null)
});

// 获取当前日期并格式化
const formatDate = (date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
};


// 获取指定星期几的日期
const getDayDate = (day) => {
    const date = new Date(currentWeekStart.value);
    // 设置为本周的Monday
    date.setDate(date.getDate() - date.getDay() + 1);
    // 根据星期几计算具体日期
    const dayIndex = ['0', '1', '2', '3', '4', '5', '6'].indexOf(day);
    date.setDate(date.getDate() + dayIndex);
    return formatDate(date);
};

// 更新当前日期显示
const updateCurrentDate = () => {
    const date = new Date(currentWeekStart.value);
    date.setDate(date.getDate() - date.getDay() + 1); // 本周Monday
    currentDate.value = `第${getWeekNumber(date)}周 (${formatDate(date)} 至 ${formatDate(new Date(date.getTime() + 6 * 86400000))})`;
};

// 获取周数
const getWeekNumber = (date) => {
    const firstDayOfYear = new Date(date.getFullYear(), 0, 1);
    const pastDaysOfYear = (date - firstDayOfYear) / 86400000;
    return Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7);
};

// 上一周
const prevWeek = () => {
    currentWeekStart.value = new Date(currentWeekStart.value.getTime() - 7 * 86400000);
    updateCurrentDate();
    getCurriculumSchedule();
};

// 下一周
const nextWeek = () => {
    currentWeekStart.value = new Date(currentWeekStart.value.getTime() + 7 * 86400000);
    updateCurrentDate();
    getCurriculumSchedule();
};

// 判断是否是本周
const isCurrentWeek = computed(() => {
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    const currentMonday = new Date(currentWeekStart.value);
    currentMonday.setDate(currentMonday.getDate() - currentMonday.getDay() + 1);
    currentMonday.setHours(0, 0, 0, 0);
    const nextMonday = new Date(currentMonday.getTime() + 7 * 86400000);
    return today >= currentMonday && today < nextMonday;
});

// 获取课程名称
const getCourseName = (courseId) => {
    if (!courseId) return '';
    const course = courseList.value.find(item => item.courseId === courseId);
    return course ? course.courseName : '';
};

</script>

<style scoped>
/* 整体容器样式 */
.course-table-container {
    background-color: #e7f1ff;
    /* 浅蓝色背景 */
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 日期头部样式 */
.date-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    background-color: #d3e0ea;
    /* 浅蓝色背景 */
    padding: 10px 15px;
    border-radius: 8px;
}

.current-date {
    font-weight: bold;
    color: #333;
}

.week-navigation button {
    background-color: #4a90e2;
    /* 深蓝色按钮 */
    color: white;
    border: none;
    border-radius: 6px;
    padding: 5px 10px;
    margin-left: 10px;
    cursor: pointer;
}

.week-navigation button:hover {
    background-color: #3c7cd6;
}

/* 表格样式 */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background-color: white;
    /* 白色表格背景 */
    border: 1px solid #d3e0ea;
    /* 浅蓝色边框 */
}

th,
/* 时间单元格单独设置宽度 */
td:first-child {
    width: 150px;
    /* 设置时间单元格宽度为150px */
    padding: 12px 20px;
    /* 增加左右padding */
}
td {
    border: 1px solid #d3e0ea;
    /* 浅蓝色边框 */
    padding: 12px;
    text-align: center;
    color: #333;
    /* 深灰色文字 */
}

th {
    background-color: #d3e0ea;
    /* 浅蓝色表头 */
    font-weight: bold;
}

/* 输入框样式 */
input {
    width: 90%;
    padding: 6px;
    text-align: center;
    border: 3px solid #d3e0ea;
    /* 浅蓝色边框 */
    border-radius: 4px;
    background-color: #f8faff;
    /* 浅蓝色背景 */
    color: #333;
    /* 深灰色文字 */
}

/* 按钮样式 */
.buttons {
    display: flex;
    justify-content: flex-end;
}

button {
    margin-right: 10px;
    padding: 10px 20px;
    background-color: #4a90e2;
    /* 深蓝色按钮 */
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

button:hover {
    background-color: #3c7cd6;
    /* 按钮悬停颜色 */
}

</style>